<template>
	<view>
		<!-- <page-head :title="'详情'" :headtype="2"></page-head> -->
		<view class="goodsl">
			<view class="goodsitem marginAuto" v-for="(item,index) in datas" :key="index">
				<view class="gdtop flex">
					<view class="gdtopl flex">
						<view class="gdtoplheadimg">
							<image :src="apifun.serveimg+'headav.png'" mode=""></image>
						</view>
						<view class="gdtoplname">张珊珊</view>
						<view class="gdtoplphone">15923021234</view>
					</view>
					<view class="gdtopr" v-if="item.status == 1">待分配教练</view>
					<view class="gdtopr" v-if="item.status == 2">教学中</view>
					<view class="gdtopr" v-if="item.status == 3">完成</view>
				</view>
				<view class="gdtimeb flex">
					<view class="gdtimebl flex">
						<view class="gdtimebltitle mainBg baiColor">订单时间<view class="gdtimebld"></view></view>
						<view class="gdtimebltime mainColor">2024-11-1 12:04</view>
					</view>
					<view class="gdtimebr mainColor">先体验后付款</view>
				</view>
				<view class="gdphase flex">
					<view class="gdphaseeach flex">
						<uv-icon name="play-right-fill" color="#1177F4" size="10"></uv-icon>
						<text>完成阶段</text>
						<text class="mainColor">1/5</text>
					</view>
					<view class="gdphaseeach flex">
						<uv-icon name="play-right-fill" color="#1177F4" size="10"></uv-icon>
						<text>待结算</text>
						<text class="mainColor">￥3900</text>
					</view>
					<view class="gdphaseeach flex">
						<uv-icon name="play-right-fill" color="#1177F4" size="10"></uv-icon>
						<text>总金额</text>
						<text class="mainColor">￥3900</text>
					</view>
				</view>
				<view class="gdpr flex">
					<view class="gdprq" style="margin-top:15rpx;"></view>
					<view class="gdprtxt">项目：小车/C1 | 小车手动挡C1二人一车券周班 |</view>
				</view>
				<view class="gdpr flex">
					<view class="gdprq" style="margin-top:17rpx;"></view>
					<view class="gdprtxt">备注：已体验</view>
				</view>
				<view class="gdpr flex">
					<view class="gdprq" style="margin-top:17rpx;"></view>
					<view class="gdprtxt">带教教练：张三</view>
				</view>
				<view class="gdbtn flex">
					<view class="gdbtneach mainBg baiColor" @click="apifun.navigate('/pages/order/orderxq')" v-if="item.status > 1">查看教学进度</view>
					<!-- <view class="gdbtneach mainBg baiColor" @click="$refs.isshowjl.open()" v-if="item.status == 1">分配教练</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				datas:[{status:1},{status:2},{status:3}],
			};
		},
		onLoad() {
			this.initData();
		},
		methods: {
			initData(){
				
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.datas = [];
			this.initData();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.page++;
			this.initData()
		},
	};
</script>

<style scoped lang="scss">
	// 列表
	.goodsitem{
		width: 650rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.gdtop{
			width: 100%;
			line-height: 52rpx;
			justify-content: space-between;
			.gdtopl{
				.gdtoplheadimg{
					width: 52rpx;
					height: 52rpx;
					image{
						width: 52rpx;
						height: 52rpx;
						border-radius: 100rpx;
					}
				}
				.gdtoplname,
				.gdtoplphone{
					font-size: 30rpx;
					color: #333333;
					margin-left: 20rpx;
				}
			}
			.gdtopr{
				font-size: 30rpx;
				color:#666666;
			}
		}
		.gdtimeb{
			margin-top: 20rpx;
			justify-content: space-between;
			.gdtimebl{
				border: 1px solid #0E71EB;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 6rpx;
				.gdtimebltitle{
					position: relative;
					font-size:28rpx;
					padding: 0 20rpx;
					.gdtimebld{
						position: absolute;
						top: 12rpx;
						right:-10rpx;
						width:16rpx;
						height: 16rpx;
						background: #fff;
						border-radius: 100rpx;
					}
				}
				.gdtimebltime{
					font-size:28rpx;
					padding: 0 20rpx;
				}
				
			}
			.gdtimebr{
				display: inline-block;
				border: 1px solid #0E71EB;
				font-size:28rpx;
				height: 44rpx;
				line-height: 44rpx;
				padding: 0 14rpx;
				border-radius: 6rpx;
			}
		}
		.gdphase{
			justify-content: space-between;
			margin-top: 20rpx;
			.gdphaseeach{
				font-size: 28rpx;
			}
		}
		.gdpr{
			margin-top:20rpx;
			.gdprq{
				display: inline-block;
				width: 16rpx;
				height: 16rpx;
				border: 1px solid #1177F4;
				border-radius: 50%;
			}
			.gdprtxt{
				margin-left: 10rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}
		.gdbtn{
			justify-content: end;
			margin-top: 10rpx;
			.gdbtneach{
				width: 300rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size:30rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>